<!DOCTYPE html>
<!-- saved from url=(0047)https://s3.envato.com/files/87575523/demo4.html -->
<html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
	<title>CCSlider</title>

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link href="./CCSlider4_files/css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="./CCSlider4_files/reset.css">
	<link rel="stylesheet" href="./CCSlider4_files/ccslider.css">
	<link rel="stylesheet" href="./CCSlider4_files/style.css">

	<style type="text/css">
		body {
			width: 100%;
			max-width: 1000px;
		}

		#slider {
			width: 900px;
			height: 350px;
			margin: 60px auto 140px auto;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7);
		}

		#slidehtml1 h3, #slidehtml2 h3{
			font: bold 30px 'PT Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
			color: #fd5;
			text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
			width: 280px;
			margin: 7% 0 1% 4.5%; /* 60px 0 20px 40px */
		}

		#slidehtml1 p, #slidehtml2 p {
			font: 20px 'PT Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;;
			color: #fff;
			text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
			width: 280px;
			margin: 0 0 1.5% 4.5%;  /* 0 0 10px 40px */
		}

		#slidehtml1 strong {
			font-weight: bold;
			color: #ffd633;
			margin-left: 10px;
			position: relative;
		}

		#slidehtml2 a {
			display: block;
			width: 120px;
			height: 30px;
			border: 1px solid #aaa;
			background-color: #444444;
			background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#141414)); /* Saf4+, Chrome */
			background-image: -webkit-linear-gradient(top, #646464, #141414); /* Chrome 10+, Saf5.1+, iOS 5+ */
			background-image:    -moz-linear-gradient(top, #646464, #141414); /* FF3.6 */
			background-image:     -ms-linear-gradient(top, #646464, #141414); /* IE10 */
			background-image:      -o-linear-gradient(top, #646464, #141414); /* Opera 11.10+ */
			background-image:         linear-gradient(top, #646464, #141414);
			color: #fff;
			font: 16px/30px 'Helvetica Neue', Helvetica, Arial, sans-serif;;
			text-align: center;
			text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.7);
			margin: 2% 0 0 4.5%;  /* 20px 0 0 40px */
			cursor: pointer;
			-moz-border-radius: 20px;
			-webkit-border-radius: 20px;
			border-radius: 20px;
			-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
			-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
		}

		#demo-description {
			max-width: 900px;
			width: 90%;
			margin: 60px auto;
			color: #fff;
			font: 20px "PT Sans", Georgia, Times, serif;
			text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
		}
	</style>

	<!--[if lt IE 8]>
		<script src="https://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
	<![endif]-->

	<!--[if lt IE 9]>
		<style type="text/css">
			.slider-caption {
				background: transparent;
				-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2FFFFFF,endColorstr=#B2FFFFFF)"; /* IE8 */
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2FFFFFF,endColorstr=#B2FFFFFF);   /* IE6 & 7 */
				zoom: 1;
			}
		</style>

		<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->


</head>
<body>


	<header>
		<hgroup>
			<h1 id="title"><img src="./CCSlider4_files/title.png" alt="ccslider"></h1>
			<h2 id="subtitle">The slider that opens a new dimension</h2>
		</hgroup>

		<nav id="demo-nav">
			<ul>
				<li><a href="https://s3.envato.com/files/87575523/index.html">Demo 1</a></li>
				<li><a href="https://s3.envato.com/files/87575523/demo2.html">Demo 2</a></li>
				<li><a href="https://s3.envato.com/files/87575523/demo3.html">Demo 3</a></li>
				<li class="active"><a href="https://s3.envato.com/files/87575523/demo4.html">Demo 4</a></li>
				<li><a href="https://s3.envato.com/files/87575523/demo5.html">Demo 5</a></li>
			</ul>
		</nav>
	</header>

	<div id="slider" class="ccslider controlThumbs" style="background-image: none; width: 900px; height: 350px;"><div class="slider-innerWrapper">
		<img src="./CCSlider4_files/lion.jpg" data-htmlelem="#slidehtml1" data-thumbname="lion-thumb.jpg" style="z-index: 3;">
		<img src="./CCSlider4_files/zebra.jpg" alt="" data-htmlelem="#slidehtml2" data-thumbname="zebra-thumb.jpg">
		<img src="./CCSlider4_files/tiger.jpg" alt="" data-thumbname="tiger-thumb.jpg">
		<img src="./CCSlider4_files/elephant.jpg" alt="" data-thumbname="elephant-thumb.jpg">
		<img src="./CCSlider4_files/cheetah.jpg" alt="" data-thumbname="cheetah-thumb.jpg">
		<img src="./CCSlider4_files/rhino.jpg" alt="" data-thumbname="rhino-thumb.jpg">
	</div><a class="slider-nav prev"></a><a class="slider-nav next"></a><ul class="control-links"><li class="linkThumb active" data-index="0"><img src="./CCSlider4_files/lion-thumb.jpg"></li><li class="linkThumb" data-index="1"><img src="./CCSlider4_files/zebra-thumb.jpg"></li><li class="linkThumb" data-index="2"><img src="./CCSlider4_files/tiger-thumb.jpg"></li><li class="linkThumb" data-index="3"><img src="./CCSlider4_files/elephant-thumb.jpg"></li><li class="linkThumb" data-index="4"><img src="./CCSlider4_files/cheetah-thumb.jpg"></li><li class="linkThumb" data-index="5"><img src="./CCSlider4_files/rhino-thumb.jpg"></li></ul><div class="slider-timer pause"></div><div class="slider-caption"></div><div class="cc-htmlwrapper" style="display: block;"><div id="slidehtml1" class="cc-html" style="display: block;">
		<h3 style="display: block; position: relative; top: 0px;">Custom HTML</h3>

		<p style="display: block; position: relative; top: 0px;">Each slide can have a custom html content which you can animate <strong style="display: inline; left: 0px;">Anyway You Want</strong></p>
	</div><div id="slidehtml2" class="cc-html">
		<h3>API Functions</h3>

		<p>Manipulate the slideshow with helpful API functions.</p>
		<p>Click this button to go to the next slide</p>
		<a id="gotonext">Next Slide</a>
	</div></div><a class="slider-link" href="https://s3.envato.com/files/87575523/demo4.html" style="display: none;"></a><div class="clock-mask left"><div class="clock-outer" style="right: -900px; width: 900px; height: 965.66px; margin-top: -482.83px;"><div class="clock-inner" style="width: 900px; height: 350px; margin-top: -175px;"></div></div></div><div class="clock-mask right"><div class="clock-outer" style="left: -900px; width: 900px; height: 965.66px; margin-top: -482.83px;"><div class="clock-inner" style="width: 900px; height: 350px; margin-top: -175px;"></div></div></div></div>


	

	



	<p id="demo-description">
		Here you can see the 2d effects in action. The slides are randomly assigned effects from the available list of 2d effects. Also here thumbnails
		of the slide images are used as control links.
	</p>


	<script src="./CCSlider4_files/jquery.min.js.下载"></script>
	<script>!window.jQuery && document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
	<script src="./CCSlider4_files/jquery-migrate-1.1.1.min.js.下载"></script>
	<script src="./CCSlider4_files/jquery.ccslider-3.0.2.min.js.下载"></script>
	<script>
		$(function(){
			$('#demo-nav').find('a').tooltip({effect: 'slide'});
		});


		$(window).load(function(){
			$('#slider').ccslider({
				effectType: '2d',
				effect: 'random',
				controlLinkThumbs: true,
				controlThumbLocation: 'gallery/demo3/thumbs/',
				beforeSlideChange: function(index) {
					if( index === 0 ) {
						$('#slidehtml1').children().hide();
					}
					else if(index === 1) {
						$('#slidehtml2').children().hide();
					}
				},
				afterSlideChange: function(index) {
					if( index === 0 ) {
						var children = $('#slidehtml1').children();
						children.css({ position: 'relative', top: '-20px'});
						children.filter('h3').animate({ top: 0, opacity: 'toggle'}, 600);
						children.filter('p').eq(0).delay(100).animate({ top: 0, opacity: 'toggle'}, 600);
						children.find('strong').hide().css('left', '50px').delay(300).animate({ left: 0, opacity: 'toggle'}, 600);
					}
					if(index === 1) {
						var children = $('#slidehtml2').children();
						children.css({ position: 'relative', left: '-300px'});
						children.filter('h3').animate({ left: 0, opacity: 'toggle'}, 600);
						children.filter('p').delay(100).animate({ left: 0, opacity: 'toggle'}, 600);
						children.filter('a').delay(200).animate({ left: 0, opacity: 'toggle'}, 600);
					}
				}
			});

			// animation for html content of first slide on page load
			var children = $('#slidehtml1').children().hide();
			children.css({ position: 'relative', top: '-20px'});
			children.filter('h3').animate({ top: 0, opacity: 'toggle'}, 600);
			children.filter('p').eq(0).delay(100).animate({ top: 0, opacity: 'toggle'}, 600);
			children.find('strong').hide().css('left', '50px').delay(300).animate({ left: 0, opacity: 'toggle'}, 600);

			// use ccslider api to go to next slide
			var api = $('#slider').data('ccslider');
			$('#slidehtml2').find('a').click(function(){
				api.next();
			});
		});
	</script>


<div class="tooltip" style="display: none; position: absolute; top: 63px; left: 576.875px; opacity: 0;">Slideshow with randomly changing 2d effects and with thumbnails as control links</div></body></html>